/**/import React from 'react'
import {Image,StyleSheet} from 'react-native'
import {createStackNavigator,createBottomTabNavigator} from 'react-navigation';
import HomePage from './page/home';
import MinePage from './page/mine';

const HomeStack=createStackNavigator({
    Home:{
        screen:HomePage,
        navigationOptions:{
            title:'首页',
            headerTitleStyle:{
                flex:1,
                textAlign:'center'
            }
        }
    }
})
const MineStack=createStackNavigator({
    Mine:{
        screen:MinePage,
        navigationOptions:{
            title:'我的',
            headerTitleStyle:{
                flex:1,
                textAlign:'center'
            }
        }
    }
})
const TabNav = createBottomTabNavigator(
    {
        Home: {
            screen:HomeStack,
            navigationOptions:{
                tabBarLabel: '首页',
                tabBarIcon: ({ focused }) => {
                    if (focused) {
                        return (
                            <Image style={styles.tabBarIcon} source={require('./img/i1_1.png')} />
                        );
                    }
                    return (
                        <Image style={styles.tabBarIcon} source={require('./img/i1.png')} />
                    );
                }
            }
        },
        Mine: {
            screen:MineStack,
            navigationOptions:{
                tabBarLabel: '我的',
                tabBarIcon: ({focused}) => {
                    if (focused) {
                        return (
                            <Image style={styles.tabBarIcon} source={require('./img/i2_2.png')}/>
                        );
                    }
                    return (
                        <Image style={styles.tabBarIcon} source={require('./img/i2.png')}/>
                    );
                },
            }
        }
    },
    {
        backBehavior: 'none', // 按 back 键是否跳转到第一个 Tab， none 为不跳转
        //是否允许滑动切换tab页
        swipeEnabled: true,
        //是否在切换tab页时使用动画
        animationEnabled: true,
        tabBarOptions: {
            //当前选中的tab bar的文本颜色和图标颜色
            activeTintColor: '#5dc147',
            //当前未选中的tab bar的文本颜色和图标颜色
            inactiveTintColor: '#000',
            //是否显示tab bar的图标，默认是false
            showIcon: true,
            //showLabel - 是否显示tab bar的文本，默认是true
            showLabel: true,
            //是否将文本转换为大小，默认是true
            upperCaseLabel: false,
            //material design中的波纹颜色(仅支持Android >= 5.0)
            pressColor: '#788493',
            //按下tab bar时的不透明度(仅支持iOS和Android < 5.0).
            pressOpacity: 0.8,
            
            //tab bar的样式
            style: {
                backgroundColor: '#fff',
                paddingBottom: 1,
                borderTopWidth: 0.2,
                paddingTop:1,
                borderTopColor: '#ccc',
            },
            //tab bar的文本样式
            labelStyle: {
                fontSize: 11,
                margin: 1
            },
            tabStyle: {
                height: 45
            },
            //tab 页指示符的样式 (tab页下面的一条线).
            indicatorStyle: {height: 0},
        },
        
        //是否懒加载
        //lazy: true,
        
    }
)
const styles = StyleSheet.create({
    tabBarIcon: {
        width: 21,
        height: 21,
    }
});
/*TabNav.navigationOptions = ({navigation}) => {
    const title=['首页','我的']
    //let {routeName} = navigation.state.routes[navigation.state.index][navigation.state.index];
    // You can do whatever you like here to pick the title based on the route name
    //console.log(navigation)
    let headerTitle = title[navigation.state.index];
    return {
        headerTitle,
        headerTitleStyle:{
            flex:1,
            textAlign:'center'
        }
        //headerLeft:<Text>hllo</Text>
    };
};*/
export default TabNav